<template>
    <create-form
        ref="UserPasswordModal"
        :modal="modal"
        :model="model.values"
        :modelSpan="model.span"
        :modelOptions="model.options"
        name="UserPasswordModal"
        @cancel="handleCancel"
        @ok="handleOk"
    ></create-form>
</template>

<script>
import CreateForm from '@/components/form/create-form'
import { usersApi } from '@/common/api/setting'
export default {
    name: 'password-change',
    components: { CreateForm },
    data() {
        return {
            modal: {
                visible: false,
                loading: false,
                title: '登陆密码修改',
                width: '30%',
            },
            model: {
                values: {
                    userName: this.$store.state.userInfo.userName,
                },
                span: 24,
                options: [
                    {
                        title: '用户名',
                        dataIndex: 'userName',
                        disabled: true,
                    },
                    {
                        title: '原密码',
                        dataIndex: 'originalPassword',
                        rules: [{ required: true, message: '请输入原始密码' }],
                        placeholder: '请输入原始密码',
                        autoComplete: 'new-password',
                        type: 'password',
                    },
                    {
                        title: '新密码',
                        dataIndex: 'newPassword',
                        rules: [{ required: true, message: '请输入新密码' }],
                        placeholder: '请输入新密码',
                        type: 'password',
                    },
                    {
                        title: '确认密码',
                        dataIndex: 'ackPassword',
                        rules: [{ required: true, message: '请再次输入新密码' }],
                        placeholder: '请再次输入新密码',
                        type: 'password',
                    },
                ],
            },
        }
    },
    methods: {
        handleOk() {
            let me = this
            this.modal.loading = true
            let validateFieldsKey = this.model.options.map(item => item.dataIndex)
            this.$refs.UserPasswordModal.form.validateFields(validateFieldsKey, { force: true }, (err, values) => {
                if (!err) {
                    if (values.ackPassword !== values.newPassword) {
                        const arr = [
                            {
                                message: '两次密码不一致!',
                                field: 'ackPassword',
                            },
                        ]
                        this.$refs.UserPasswordModal.form.setFields({
                            ackPassword: {
                                value: values.ackPassword,
                                errors: arr,
                            },
                        })
                        me.modal.loading = false
                    } else {
                        const { ackPassword, newPassword, originalPassword } = values
                        let data = {
                            confirmPassword: ackPassword,
                            newPassword: newPassword,
                            oldPassword: originalPassword,
                            userId: this.$store.state.userInfo.userId,
                        }
                        usersApi
                            .changePassword(data)
                            .then(res => {
                                console.log(res)
                                me.$message.success('密码修改成功')
                                me.modal = {
                                    visible: false,
                                    loading: false,
                                    title: '登陆密码修改',
                                    width: '30%',
                                }
                            })
                            .catch(e => {})
                            .finally(() => {
                                this.modal.loading = false
                            })
                    }
                } else {
                    this.modal.loading = false
                }
            })
        },
        handleCancel() {
            this.modal = {
                visible: false,
                loading: false,
                title: '登陆密码修改',
                width: '30%',
            }
        },
    },
}
</script>
